<template>
  <!-- 数据的双向绑定 -->
  <div class="index">
    <h2>数据的双向绑定</h2>
    <!-- 数据的单项绑定简单的写法 -->
    <input type="text" :value="school" > <br>
    <!-- 数据的双向绑定简单的写法 -->
    <input type="text" v-model="school"> <br>
    <!-- 数据的单项的绑定复杂的写法 -->
    <input type="text" v-bind:value="school"> <br>
  </div>
</template>

<script>
  export default {
    name:'Index',
    data() {
      return {
        school:'北京'
      }
    },
  }
</script>

<style scoped>
  .index {
  padding: 20px;
  background-image:linear-gradient(15deg,#13547a 0%, #80d0c7 100%);
  box-shadow: 0 0 10px #d1fdff;
  border-radius: 20px;
  margin-top: 10px;
}
</style>